<template>
  <div>
    <!--输入需求-->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="批量修改的文件：" class="el-col-4">
          <el-upload
            ref="upload"
            class="upload"
            action="string"
            :file-list="fileList"
            :on-change="handleChange"
            :auto-upload="false"
            :limit="8"
            multiple="multiple"
          >
            <el-button
              slot="trigger"
              size="small"
              type="primary"
              @click="delFile"
            >选取文件
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item class="el-col-3">
          <el-button size="small" type="primary" @click="getTBDiscount">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="titleList" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" />
        <el-table-column prop="userName" label="用户姓名" width="100" />
        <el-table-column prop="fileName" label="文件名称" width="500" />
        <el-table-column prop="status" label="状态" width="380">
          <template slot-scope="scope">
            <a
              :style="{ color: scope.row.status === 'DOWNLOAD' ? 'blue' : 'green' }"
              @click="download(scope.row.fileName)"
            >
              {{ scope.row.status === 'DOWNLOAD' ? '正在下载' : '下载完成' }}
            </a>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50,100,200,500]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
import tbApi from '@/api/tb'

export default {
  data() {
    return {
      titleList: [],
      searchModel: {
        pageNo: 1,
        pageSize: 10
      },
      editInfo: false,
      total: 0,
      fileList: [],
      formInline: {
        formData: ''
      },
      displayNoSkuGoodsId: false,
      goodsIds: ''
    }
  },
  created() {
    this.getTBTitleList()
  },
  methods: {
    getTBDiscount() {
      // eslint-disable-next-line no-unused-vars
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // eslint-disable-next-line no-unused-vars
      const hasToken = getToken()
      const formData = new FormData()
      for (var i = 0; i < this.fileList.length; i++) {
        formData.append('file', this.fileList[i].raw)
      }
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/tb/updateTitle', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8',
          'X-Token': hasToken
        }
      }).then(res => {
        loading.close()
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.message
        // eslint-disable-next-line no-new-object
        console.log(aaa)
        if (res.data.code === 20000) {
          console.log(res.data.data)
          // 发起下载的请求
          // this.download(res.data.data)
          this.getTBTitleList()
          if (aaa === '成功') {
            // 展示失败的goodsId 没有SKU_ID
            this.$message({
              message: '成功：' + aaa,
              type: 'success'
            })
          } else {
            this.displayNoSkuGoodsId = true
            this.goodsIds = aaa
          }
        } else {
          // this.dialogFormVisible = true
          // this.againLinks = aaa
          this.$message({
            message: '错误信息：' + aaa,
            type: 'warning'
          })
        }
      })
    },

    // 点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = []
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 点击文件
    handlePreview(file) {
      console.log(file)
    },
    openEditUI(id) {
      if (id == null) {
        this.title = '新增链接'
      }
      this.editInfo = true
      this.userForm.name = this.name
    },
    download(filePath) {
      this.downloadA('http://101.201.64.236:9999/prod-api/tb/download?filePath=' + filePath)
    },
    downloadA(url) {
      const a = document.createElement('a')
      a.href = url
      a.hidden = true
      // a.target = "_blank";
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value1: '',
        value2: '',
        key: Date.now()
      })
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getTBLinkList()
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo
      this.getTBLinkList()
    },
    getTBTitleList() {
      tbApi.getTBTitleList(this.searchModel).then((response) => {
        this.titleList = response.data.rows
        this.total = response.data.total
      })
    }
  }
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}

.blue-link {
  color: blue;
}

</style>
